﻿<!DOCTYPE HTML>
@{
    var shouldEnableSpa = (Request.Browser.IsWow() && User.Identity.IsAuthenticated);
    var initialMainCssClass = shouldEnableSpa ? "swapping" : string.Empty;
}
<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>

    <!-- mobile friendly <meta> tags -->
    <meta name="HandheldFriendly" content="True" />
    <meta name="MobileOptimized" content="320" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0" />
    <meta http-equiv="cleartype" content="on" />

    <!-- mobile first, responsive design stylesheets -->
    <link rel="stylesheet" type="text/css" href="~/Content/css/default.css" media="screen, handheld" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/extended.css" media="only screen and (min-width: 640px)" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/enhanced.css" media="only screen and (min-width: 320px) and (color)" />
</head>
    <body>
        @if (shouldEnableSpa)
        {
            Html.RenderPartial("_spaTemplates");
        }
        <!-- application bar -->
        <header>
            <h1>
                <a href="@Url.Action("Index", "Dashboard")">Mileage Stats</a></h1>
            @if (Request.IsAuthenticated)
            {
                <ul>
                    <li><a href="@Url.Action("SignOut", "Auth")">Sign out</a></li>
                </ul>
            }
        </header>
        <!-- #content region(s) -->
        <div id="content">
            <div id="main" class="@initialMainCssClass">
                @RenderBody()
            </div>
            <div id="extended">
		        <nav>
			        <ol class="title">
				        <li>Extended Region</li>
			        </ol>
		        </nav>
		        <div class="view">
                    <h1>Extended View</h1>
                    <p>This region is only displayed on clients with a sufficient screen size.</p>
                    <p>This behavior is part of a technique known as <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a>
                        and is implemented using <a href="http://www.w3.org/TR/css3-mediaqueries/">CSS Media Queries</a>.</p>
                    <p>For specifics on the implementation in MileageStats Mobile, examine the css files searching for rules making use of <span>@@media</span>.</p>
		        </div>
	        </div>
        </div>

        <!-- application footer region -->
        <footer>
            @Html.Partial("_ViewSwitcher")
            <p>
                &copy; Copyright 2012 Microsoft</p>
        </footer>
        <script type="text/javascript" src="@Url.Action("ProfileScript", "MobileProfile")"></script>	 
        @if (shouldEnableSpa)
        {
            <script type="text/javascript">
                // allowing the server to set the root URL for the site, 
                // which is used by the client code for server requests.
                (function (mstats) {
                    mstats.rootUrl = '@Url.Content("~")';
                } (this.mstats = this.mstats || {}));
            </script>
            <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
            <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
            <script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
            <script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
            <script src="~/Scripts/mustache.js"></script>
            
			if (HttpContext.Current.IsDebuggingEnabled)
			{
				<script src="~/Scripts/mobile-debug/ajax.js"></script>
				<script src="~/Scripts/mobile-debug/app.js"></script>
                <script src="~/Scripts/mobile-debug/charts.js"></script>
				<script src="~/Scripts/mobile-debug/dashboard.js"></script>
				<script src="~/Scripts/mobile-debug/expander.js"></script>
				<script src="~/Scripts/mobile-debug/formSubmitter.js"></script>
                <script src="~/Scripts/mobile-debug/fillup-add.js"></script>
                <script src="~/Scripts/mobile-debug/reminder-add.js"></script>
                <script src="~/Scripts/mobile-debug/reminder-fulfill.js"></script>
				<script src="~/Scripts/mobile-debug/router.js"></script>
				<script src="~/Scripts/mobile-debug/transition.js"></script>
                <script src="~/Scripts/mobile-debug/vehicle.js"></script>
				<script src="~/Scripts/mobile-debug/notifications.js"></script>
            }
            else
            {
				<script src="~/Scripts/MileageStats.Mobile.min.js"></script>
			}         
			
		}
    </body>
</html>
